import { Directive, Renderer2, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[app-droppable]'
})
export class DroppableDirective {
  @Input()
  dragEnterClass: string;
  @HostListener('dragenter', ['$event'])
  onDragEnter(e) {
    if (this.el.nativeElement == e.target) {
      this.rd.addClass(this.el.nativeElement, this.dragEnterClass);
    }
  }
  @HostListener('dragover', ['$event'])
  onDragOver(e) {
    if (this.el.nativeElement == e.target) {
    }
  }
  @HostListener('dragleave', ['$event'])
  onDragLeave(e) {
    if (this.el.nativeElement == e.target) {
      this.rd.removeClass(this.el.nativeElement, this.dragEnterClass);
    }
  }
  @HostListener('drop', ['$event'])
  onDrop(e) {
    if (this.el.nativeElement == e.target) {
      //this.rd.addClass(this.el.nativeElement, this.dragEnterClass);
    }
  }
  constructor(private el: ElementRef,
  private rd:Renderer2) { }

}
